<template>
    <div class="schoolProfileBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="titleName" name="schoolProfile">
                <el-row v-if="!isDetailShow">
                    <el-col :span="24">
                        <div class="content clearFix" @click="goReadAritcle(item)" v-for="(item, index) in articleSchoolList.list" :key="index">
                            <label>{{item.title}}</label>
                            <span class="time">{{item.creationtime}}</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="block" v-if="!isDetailShow">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
                <ReadingArticlesCommon v-if="isDetailShow" :articleMes='articleMes'
                @closeDetailShow='closeDetailShow' :dictype='dictypeP'></ReadingArticlesCommon>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import ReadingArticlesCommon from '@/components/article/ReadingArticlesCommon'
    export default {
        props:['menuChangeN','isDails'],
        components:{
            ReadingArticlesCommon
        },
        watch:{
            menuChangeN:{
                handler(val){
                    if(this.isDails){
                        this.isDetailShow = false
                    }
                    this.menuActive(val)
                    // if(val.jumpType == 1 || val.jumpType == null){
                    //     if(val.children){
                    //         val.children.map(item => {
                    //             if(item.routerTo == this.$route.path && item.jumpType == 1){
                    //                 this.titleName = item.name
                    //                 this.articleSchool(item.id)
                    //             }
                    //         })
                    //     }else{
                    //         this.titleName = val.name
                    //         this.articleSchool(val.id)
                    //     }
                    // }
                },
                deep : true
            }
        },
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        created(){
            // if(this.menuChangeN){
            //     this.menuActive(this.menuChangeN)
            // }
        },
        beforeMount(){
            if(this.menuChangeN){
                this.menuActive(this.menuChangeN)
            }
        },
        mounted(){
             if(this.$route.query.junmpType == 1){
                 if(this.$route.query.dictype){
                     this.articleSchool(this.$route.query.dictype)
                 }else{
                     this.goReadAritcle(this.$route.query.article)
                 }
            }
        },
        data() {
            return {
                titleName: '',
                activeName: 'schoolProfile',
                currentPage:1,
                isDetailShow: false,
                pageSize:10,
                total: 0,
                articleSchoolList:{},
                dictypeP:31,
            };
        },
        methods: {
            menuActive(params) {
                if(params.children){
                    params.children.map(item => {
                        if(item.routerTo == this.$route.path && item.jumpType == 1){
                            this.$nextTick(() =>{
                                this.titleName = item.name
                                this.articleSchool(item.id)
                            })
                        }
                    })
                }else{
                    this.titleName = params.name
                    this.articleSchool(params.id)
                }
            },
            closeDetailShow() {
                this.isDetailShow = false
                // this.articleSchool()
            },
            goReadAritcle(params){
                this.articleMes = params
                this.isDetailShow =true
                if(this.userInfo.id && params.id){
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: params.userid,
                        visitorid: params.id,
                        type: 2
                    })
                }
            },
            articleSchool(params){
                if(params){
                    this.isDetailShow = false
                    this.dictypeP = params
                    this.$store.dispatch('articleModule/articleSchool',{
                        hisUserId:  this.otherUserInfo.userid || this.otherUserInfo.id || this.otherUserInfo.affiliatedId,
                        schoolid: this.otherUserInfo.xxdm,
                        classifyid: null,
                        dictype: params?params : this.dictypeP,
                        draft: 1,
                        limit: this.pageSize,
                        page: this.currentPage,
                        search: null,
                        sortType: 0,
                        userid: null,
                        yearandmonth: null
                    }).then(res =>{
                        if(res.data.code ==200){
                            this.articleSchoolList = res.data.result
                            this.total = res.data.result.total
                        }
                    })
                }
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.articleSchool(this.dictypeP)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.articleSchool(this.dictypeP)
            }
        }
    }
</script>

<style lang="scss" scoped>
.schoolProfileBox{
    background-color: white;
    box-sizing: border-box;
    padding: 0 10px;
    min-height: 70vh;
    .content{
        font-size: 14px;
        color: #303133;
        margin-bottom: 10px;
        text-align: left;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        label{
            cursor: pointer;
        }
        .time{
            font-size: 12px;
            float: right;
            margin-top: 5px;
        }
    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>